<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { getHomeBannerAPI } from '@/services/home'
import type { BannerItem } from '@/types/home'
import { getCategoryTopAPI } from '@/services/category'
import type { CategoryTopItem } from '@/types/category'
import PageSkeleton from './components/PageSkeleton'
//分类页的轮播图数据存储
const bannerList = ref<BannerItem[]>([])
//分类页的获取轮播图数据请求
const getBannerData = async () => {
  const res = await getHomeBannerAPI(2)
  bannerList.value = res.result
  // console.log(res)
}
//存放分类数据的数组
const categoryList = ref<CategoryTopItem>([])
//获取分类数据
const getCategoryTopData = async () => {
  const res = await getCategoryTopAPI()
  categoryList.value = res.result
  // console.log(res);
}
//tab栏功能的索引
const activeIndex = ref<number>(0)
//是否数据加载完毕
const isFinish = ref<boolean>(false)
onLoad(async () => {
  await Promise.all([getBannerData(), getCategoryTopData()])
  isFinish.value = true
})
//提取当前耳机分类数据
const subCategoryList = computed(() => {
  return categoryList.value[activeIndex.value]?.children || []
})
</script>

<template>
  <PageSkeleton v-if="!isFinish"></PageSkeleton>
  <template v-else>
    <view class="viewport">
      <!-- 搜索框 -->
      <view class="search">
        <view class="input">
          <text class="icon-search">女靴</text>
        </view>
      </view>
      <!-- 分类 -->
      <view class="categories">
        <!-- 左侧：一级分类 -->
        <scroll-view class="primary" scroll-y>
          <view
            @tap="activeIndex = index"
            v-for="(item, index) in categoryList"
            :key="item.id"
            class="item"
            :class="{ active: index === activeIndex }"
          >
            <text class="name"> {{ item.name }} </text>
          </view>
        </scroll-view>
        <!-- 右侧：二级分类 -->
        <scroll-view class="secondary" scroll-y>
          <!-- 焦点图 -->
          <XtxSwiper class="banner" :list="bannerList" />
          <!-- 内容区域 -->
          <view class="panel" v-for="item in subCategoryList" :key="item.id">
            <view class="title">
              <text class="name">{{ item.name }}</text>
              <navigator class="more" hover-class="none">全部</navigator>
            </view>
            <view class="section">
              <navigator
                v-for="goods in item.goods"
                :key="goods.id"
                class="goods"
                hover-class="none"
                :url="`/pages/goods/goods?id=${goods.id}`"
              >
                <image class="image" :src="goods.picture" :lazy-load="true"></image>
                <view class="name ellipsis">{{ goods.name }}</view>
                <view class="price">
                  <text class="symbol">¥</text>
                  <text class="number">{{ goods.price }}</text>
                </view>
              </navigator>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </template>
</template>

<style lang="scss">
@import './styles/category.scss';
</style>
